/**
* @Description:功能选项
* @author: Guitu
*/
<template>
	<view class="set">
		<!-- 我的订单/收货地址模块 -->
		<view class="section" @click="setlist(idx)" v-for="(item,idx) of setList" :key="idx">
			<u-icon class="icon" size="50" :name="item.img" color="#ffcf56"></u-icon>
			<u-section class="setName" :title="item.setName" :show-line="bool" sub-title=" " :bold="false" font-size="30"></u-section>
		</view>

		<!-- 权限 团长可见 (成员管理/账单汇总模块)-->
		<template v-if="member.state === 4">
			<u-gap height="15" bg-color="#F8F3F3"></u-gap>
			<!-- state === 4-->
			<view class="section" v-for="(item,idx) of setAotList" :key="idx" @click="setAdmin(idx)">
				<u-icon class="icon" size="50" :name="item.img" color="#ffcf56"></u-icon>
				<u-section class="setName" :title="item.setName" :show-line="bool" sub-title=" " :bold="false" font-size="30"></u-section>
			</view>
		</template>

		<!-- 退出弹窗 -->
		<u-modal v-model="logoutShow" content="确定要退出吗？" :mask-close-able="true" @confirm="logout" :async-close="true"
		 show-cancel-button="true"></u-modal>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import * as api from "@/api/apiList/user/user.js"
	import {
		createNamespacedHelpers
	} from 'vuex'
	const {
		mapState,mapMutations
	} = createNamespacedHelpers('userModule')
	export default {
		data() {
			return {
				state: 4, //团长权限可见
				bool: false,
				setList: [{
					setName: "我的订单",
					img: "order"
				}, {
					setName: "退出企业",
					img: "order"
				}],
				setAotList: [{
					setName: "成员管理",
					img: "account-fill"
				}, {
					setName: "账单汇总",
					img: "rmb-circle-fill"
				}],
				logoutShow: false
			}
		},
		computed: {
			...mapState(["member"])
		},
		methods: {
			...mapMutations(["CLEAR_ALL"]),
			async API_update(data) { //更新接口
				let result = {
					data
				}
				return await api.update(result)
			},
			setAdmin(idx) { //跳转到相应的功能页面
				console.log(idx)
				switch (idx) {
					case 0:
						uni.navigateTo({ //跳转到成员管理
							url: '/pages/user/components/set/components/memBer'
						});
						break;
					case 1:
						uni.navigateTo({ //跳转到账单
							url: '/pages/user/components/set/components/billSummary/billSummary'
						});
						break;
				}
			},
			setlist(idx) {
				if (idx === 0) {
					uni.navigateTo({ //跳转到我的订单
						url: '/pages/user/components/set/components/order/order'
					})
				} else {
					this.logoutShow = true
				}
			},
			async logout() { //退出
				let member = this.$u.deepClone(this.member)

				let newMember = Object.assign({}, member, {
					state: 3 //离职
				})
				let res = await this.API_update(newMember)
				
				if (res.data.code === 1000) {
					this.CLEAR_ALL()//清空数据
					this.logoutShow = false
					this.$refs.uToast.show({
						title: res.data.msg,
						type: 'success',
						url: '/pages/regiser/regiser'//跳转到注册页
					})
					
				} else {
					this.logoutShow = false
					this.$refs.uToast.show({
						title: res.data.msg,
						type: 'error',
					})
				}
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.set {
		width: 100%;

		/* 功能选项样式 */
		.section {
			height: 100rpx;
			padding: 30rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #f0f0f0;
			display: flex;
			align-items: center;

			.icon {
				width: 40rpx;
				height: 50rpx;
				margin-right: 8rpx;
			}

			.setName {
				flex: 1;
				margin-left: 18rpx;
			}
		}
	}
</style>
